﻿@model string[]
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/_layouts/_LayoutMain.cshtml";
}
<script>
    if(typeof MessageType == "undefined"){
        var MessageType = {};
        MessageType.Online = 0;
        MessageType.Offline = 1;
        MessageType.Chat = 2;
        MessageType.GroupChat = 3;
        MessageType.Broadcast = 4;
        MessageType.Friend = 5;
        MessageType.Ping=6;
    }
    var xiaoluSocket=null;

    function InitSocket(){
        if('WebSocket' in window){
            xiaoluSocket =  new WebSocket('ws://localhost:8090');
        }else if('MozWebSocket' in window){
            xiaoluSocket = new MozWebSocket(url);
        }else{
            layui.use(['layer'],function(){
                var layer = layui.layer;
                layer.alert("您的浏览器不支持websocket协议,建议使用新版谷歌、火狐等浏览器，请勿使用IE10以下浏览器，360浏览器请使用极速模式，不要使用兼容模式！");
            });
        }

        //连接成功时触发
        xiaoluSocket.onopen = function(){
            console.log("Connected to websocket");
            var imsg={
                "Sender":@Model[3],
                "Receiver":0,
                "Type":MessageType.Online,
                "Data":{"ID":@Model[3],"LoginID":"@Model[0]","NickName":"@Model[1]"},
                "Status":0};
            SendMessage(imsg);
        };

        xiaoluSocket.onclose = function () {
            console.log("Close connection to websocket");
            // 断线重连
            layer.confirm('连接失败，是否重连？', {
                btn: ['重连', '取消'] //按钮
            }, function () {
                    layer.closeAll();
                    InitSocket();
            }, function () {

            });
        };

        xiaoluSocket.onerror = function () {
            // 断线重连
            layer.confirm('连接失败，是否重连？', {
                btn: ['重连', '取消'] //按钮
            }, function () {
                layer.closeAll();
                InitSocket();
            }, function () {

            });
            console.log("Connect error!");
        };
    }

    //心跳检测
    var heartCheck = {
        timeout: 60,        //9分钟发一次心跳
        timeoutObj: null,
        serverTimeoutObj: null,
        reset: function(){
            clearTimeout(this.timeoutObj);
            clearTimeout(this.serverTimeoutObj);
            return this;
        },
        start: function(){
            var self = this;
            this.timeoutObj = setTimeout(function(){
                //这里发送一个心跳，后端收到后，返回一个心跳消息，
                //onmessage拿到返回的心跳就说明连接正常
                var imsg={
                    "Sender":@Model[3],
                    "Receiver":0,
                    "Type":MessageType.Ping,
                    "Data":"",
                    "Status":0};
                SendMessage(imsg);
                console.log("ping!")
                self.serverTimeoutObj = setTimeout(function(){//如果超过一定时间还没重置，说明后端主动断开了
                    xiaoluSocket.close();     //如果onclose会执行reconnect，我们执行ws.close()就行了.如果直接执行reconnect 会触发onclose导致重连两次
                }, self.timeout)
            }, this.timeout)
        }
    };

    function SendMessage(msg) {
        console.log("Send Message:"+msg.Data);
        if (xiaoluSocket.readyState===1) {
            xiaoluSocket.send(JSON.stringify(msg));
        }
    }

    layui.use('layim', function (layim) {
        InitSocket();
        //基础配置
        layim.config({
            init: {
                url: 'ChatInit' //接口地址（返回的数据格式见下文）
                , type: 'get' //默认get，一般可不填
                , data: { userID:@Model[3]} //额外参数
            } //获取主面板列表信息，下文会做进一步介绍
            //获取群员接口（返回的数据格式见下文）
          , members: {
              url: 'GroupMember' //接口地址（返回的数据格式见下文）
            , type: 'get' //默认get，一般可不填
            , data: {} //额外参数
          }
            //上传图片接口（返回的数据格式见下文），若不开启图片上传，剔除该项即可
          , uploadImage: {
              url: 'UploadImg' //接口地址
            , type: 'post' //默认post
          }
            //上传文件接口（返回的数据格式见下文），若不开启文件上传，剔除该项即可
          , uploadFile: {
              url: 'UploadImg' //接口地址
            , type: 'post' //默认post
          }
            //扩展工具栏，下文会做进一步介绍（如果无需扩展，剔除该项即可）
          , tool: [{
              alias: 'code' //工具别名
            , title: '代码' //工具名称
            , icon: '&#xe64e;' //工具图标，参考图标文档
          }]
          , msgbox: layui.cache.dir + 'css/modules/layim/html/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可
          , find: layui.cache.dir + 'css/modules/layim/html/find.html' //发现页面地址，若不开启，剔除该项即可
          , chatLog: layui.cache.dir + 'css/modules/layim/html/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可
        });

        layim.on('sendMessage', function(res){
            var mine = res.mine; //包含我发送的消息及我的信息
            var imsg={
                "Sender":res.mine.id,
                "Receiver":res.to.id,//对方的信息res.to
                "Type":res.to.type=='friend'? MessageType.Chat:MessageType.GroupChat,
                "Data":res.mine.content,
                "Status":0
            };
            SendMessage(imsg);
        });

        //监听收到的消息
        xiaoluSocket.onmessage = function(res){
            //res为接受到的值，如 {"emit": "messageName", "data": {}}
            //emit即为发出的事件名，用于区分不同的消息
            res = JSON.parse(res.data);
            console.log(res.data);
            if(res.Type==MessageType.Chat){
                layim.getMessage(res.Data);
            }
        };
    });

</script>

